<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="项目进度表" data-page-identification="e_mhdv4iy8nv">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_cc874syqn2 自定义模板_0tdzkmsbqd -->
      <!--审批详情-->
      <a-modal @cancel="statuState.visible = false" centered :visible="statuState.visible" title="审批详情" :footer="null" :body-style="{maxHeight:'700px',overflowY:'auto'}" width="400px">
        <div class="status-item" v-for="(item, index) in statuState.list">
          <div class="title-new-status">
            <div class="left-title"
              >审批类型:<span class="weight-status-new">{{ item.processName }} </span></div
            >
            <div class="right-title"
              >审批提交时间:<span class="weight-status-new">{{ item.createdDate }} </span></div
            >
          </div>
          <a-steps class="status-step" direction="vertical">
            <a-step
              v-for="(inside, index) in item.processTaskList"
              :title="inside.nodeMessage"
              :description="inside.taskName + ':' + inside.assignUserName"
              :status="getIconStatus(inside.nodeStatus)"
            />
          </a-steps>
        </div>
      </a-modal>

      <!--审批详情-->
      <a-modal title="项目阶段详情" v-model:visible="state.detailVisible" width="1200px" :footer="null" centered @cancel="detailClose">
        <div class="product-content">
          <a-row class="row-size">
            <a-col :span="6" class="row-size">
              <a-form-item label="项目名称">
                <a-tooltip>
                  <template #title>{{ state.milepostMsg.projectName }}</template>
                  <div class="detail-item too-long">{{ state.milepostMsg.projectName }}</div>
                </a-tooltip>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="项目阶段名称">
                <div class="detail-item">{{ state.milepostMsg.milepostName }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="项目阶段状态">
                <div class="detail-item">{{ state.milepostMsg.milepostStatus }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="项目经理">
                <div class="detail-item">{{ state.milepostMsg.pmName }}</div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="row-size">
            <a-col :span="6" class="row-size">
              <a-form-item label="计划开始时间">
                <div class="detail-item">{{ state.milepostMsg.startTime }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="计划结束时间">
                <div class="detail-item">{{ state.milepostMsg.endTime }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="实际开始时间">
                <div class="detail-item">{{ state.milepostMsg.actualStartTime }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="实际结束时间">
                <div class="detail-item">{{ state.milepostMsg.actualFinishTime }}</div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="row-size">
            <a-col :span="6" class="row-size">
              <a-form-item label="计划工时">
                <div class="detail-item">{{ state.milepostMsg.workingDaysNum }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="实际工时">
                <div class="detail-item">{{ state.milepostMsg.actualWorkingDaysNum }}</div>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <a-tabs v-model:activeKey="state.detailActiveKey" type="card">
          <a-tab-pane key="1" tab="进行中任务">
            <div class="default-table">
              <a-table :columns="doingTaskColumns" :data-source="state.doingTask" bordered>
                <template #bodyCell="{ column, text, record }">
                  <template v-if="column.dataIndex === 'taskName'">
                    <div class="task-name">
                      <div
                        v-if="record.mark === '里程碑'"
                        :class="{
                                                    'task-milestone': record.mark === '里程碑',
                                                    'task-milestone-right':
                                                        record.mark === '里程碑' && record.critialPath
                                                }"
                        >里程碑</div
                      >
                      <div
                        v-else-if="record.mark === '初验'"
                        :class="{
                                                    'task-first': record.mark === '初验',
                                                    'task-first-right': record.mark === '初验' && record.critialPath
                                                }"
                      ></div>
                      <div
                        v-else-if="record.mark === '终验'"
                        class="task-over"
                        :class="{
                                                    'task-over': record.mark === '终验',
                                                    'task-over-right': record.mark === '终验' && record.critialPath
                                                }"
                      ></div>
                      <div v-if="record.critialPath" class="critical-path">关键路径</div>
                      <div
                        :class="{
                                                    'is-first-no': record.mark === null && !record.critialPath,
                                                    'is-first': record.mark !== null,
                                                    'is-first-path': record.mark !== null && record.critialPath,
                                                    'is-first-path-no-mark': record.mark === null && record.critialPath
                                                }"
                      >
                        <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                          <template #title>
                            <p style="color: #262626; margin: 0">{{ record.taskIndex }} {{ text }}</p>
                          </template>
                          <span class="task-name-title">{{ record.taskIndex }} {{ text }}</span>
                        </a-tooltip>
                      </div>
                    </div>
                  </template>
                  <template v-if="column.dataIndex === 'taskStatus'">
                    <div class="task-status-new" @click="getTaskStatus(record.taskId, 0)">
                      <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                      <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                      <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                      <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                      <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                      <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                      <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                      <div v-else>{{ text }}</div>
                    </div>
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="进行中行动项任务">
            <div class="default-table">
              <a-table :columns="doingActionTaskColumns" :data-source="state.doingActionTask" bordered>
                <template #bodyCell="{ column, text, record }">
                  <template v-if="column.dataIndex === 'taskStatus'">
                    <div class="task-status-new" @click="getTaskStatus(record.actionTaskId, 1)">
                      <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                      <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                      <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                      <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                      <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                      <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                      <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                      <div v-else>{{ text }}</div>
                    </div>
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="未关闭任务风险">
            <div class="default-table">
              <a-table :columns="riskColumns" :data-source="state.riskTask" bordered>
                <template #bodyCell="{ column, text, record }">
                  <!--                                    <template v-if="column.dataIndex === 'taskName'">-->
                  <!--                                        <div class="task-name">-->
                  <!--                                            <div-->
                  <!--                                                v-if="record.mark === '里程碑'"-->
                  <!--                                                :class="{-->
                  <!--                                                    'task-milestone': record.mark === '里程碑',-->
                  <!--                                                    'task-milestone-right':-->
                  <!--                                                        record.mark === '里程碑' && record.critialPath-->
                  <!--                                                }"-->
                  <!--                                                >里程碑</div-->
                  <!--                                            >-->
                  <!--                                            <div-->
                  <!--                                                v-else-if="record.mark === '初验'"-->
                  <!--                                                :class="{-->
                  <!--                                                    'task-first': record.mark === '初验',-->
                  <!--                                                    'task-first-right': record.mark === '初验' && record.critialPath-->
                  <!--                                                }"-->
                  <!--                                            ></div>-->
                  <!--                                            <div-->
                  <!--                                                v-else-if="record.mark === '终验'"-->
                  <!--                                                class="task-over"-->
                  <!--                                                :class="{-->
                  <!--                                                    'task-over': record.mark === '终验',-->
                  <!--                                                    'task-over-right': record.mark === '终验' && record.critialPath-->
                  <!--                                                }"-->
                  <!--                                            ></div>-->
                  <!--                                            <div v-if="record.critialPath" class="critical-path">关键路径</div>-->
                  <!--                                            <div-->
                  <!--                                                :class="{-->
                  <!--                                                    'is-first-no': record.mark === null && !record.critialPath,-->
                  <!--                                                    'is-first': record.mark !== null,-->
                  <!--                                                    'is-first-path': record.mark !== null && record.critialPath,-->
                  <!--                                                    'is-first-path-no-mark': record.mark === null && record.critialPath-->
                  <!--                                                }"-->
                  <!--                                            >-->
                  <!--                                                <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">-->
                  <!--                                                    <template #title>-->
                  <!--                                                        <p style="color: #262626; margin: 0"-->
                  <!--                                                            >{{ record.taskIndex }} {{ text }}</p-->
                  <!--                                                        >-->
                  <!--                                                    </template>-->
                  <!--                                                    <span class="task-name-title"-->
                  <!--                                                        >{{ record.taskIndex }} {{ text }}</span-->
                  <!--                                                    >-->
                  <!--                                                </a-tooltip>-->
                  <!--                                            </div>-->
                  <!--                                        </div>-->
                  <!--                                    </template>-->
                  <template v-if="column.dataIndex === 'taskStatus'">
                    <div class="task-status-new" @click="getTaskStatus(record.taskId, 0)">
                      <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                      <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                      <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                      <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                      <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                      <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                      <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                      <div v-else>{{ text }}</div>
                    </div>
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="未关闭行动项任务风险">
            <div class="default-table">
              <a-table :columns="riskActionColumns" :data-source="state.riskActionTask" bordered />
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-modal>
      <a-modal title="与项目关联的行动项任务" v-model:visible="state.actionTaskVisible" width="1200px" :footer="null" centered>
        <div class="default-table">
          <a-table :columns="doingActionTaskColumns" :data-source="state.actionProjectData" bordered>
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex === 'taskStatus'">
                <div class="task-status-new" @click="getTaskStatus(record.taskId, 0)">
                  <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                  <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                  <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                  <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                  <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                  <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                  <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                  <div v-else>{{ text }}</div>
                </div>
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
      <div class="body">
        <div class="top">
          <a-row class="row-size" :gutter="24">
            <a-col :span="6" class="row-size">
              <a-form-item label="项目名称">
                <a-select
                  style="max-width: 300px"
                  v-model:value="state.projectName"
                  show-search
                  placeholder="请选择"
                  allow-clear
                  @focus="getProject"
                  :filterOption="
                                        (input, option) => {
                                            return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  :fieldNames="{
                                        label: 'projectName',
                                        value: 'projectId'
                                    }"
                  :options="state.projectlist"
                />
              </a-form-item>
            </a-col>
            <a-col class="row-size" :span="6">
              <a-form-item label="项目状态">
                <a-select
                  v-model:value="state.projectStatus"
                  :options="[
                                        { label: '进行中', value: '进行中' },
                                        { label: '完成', value: '完成' }
                                    ]"
                />
              </a-form-item>
            </a-col>
            <a-col class="row-size" :span="6">
              <a-space size="middle">
                <a-button type="primary" @click="getTableData()">查询</a-button>
                <a-button type="ghost" @click="resetTableData">重置</a-button>
              </a-space>
            </a-col>
          </a-row>
        </div>
        <div class="content">
          <div class="table-tip">
            <div class="table-tip">
              <div class="tip-title">模版项目进度看板 </div>
              <div class="tip1"><span class="tip-msg">准备工作</span><div class="box1"></div></div>
              <div class="tip2"><span class="tip-msg">启动工作</span><div class="box2"></div></div>
              <div class="tip3"><span class="tip-msg">数据预处理</span><div class="box3"></div></div>
              <div class="tip4"><span class="tip-msg">产品确认</span><div class="box4"></div></div>
              <div class="tip5"><span class="tip-msg">数据建模</span><div class="box5"></div></div>
              <div class="tip6"><span class="tip-msg">试运行</span><div class="box6"></div></div>
              <div class="tip7"><span class="tip-msg">正试运行</span><div class="box7"></div></div>
              <div class="tip8"><span class="tip-msg">变更时间</span><div class="box8"></div></div>
            </div>
            <div class="right-btn">
              <a-button type="primary" size="small" style="margin-top: 18px" ghost @click="resetWidth">今天</a-button>
            </div>
          </div>
          <!--                 图表部分-->
          <a-spin :spinning="spinLoading" title="加载中">
            <div class="table_detail_wrapper">
              <div class="product-wrapper flex">
                <div class="product-list">
                  <div class="table-title">项目概览</div>
                  <div class="product-info" id="mainLeft">
                    <div class="project-item" v-for="(projectItem, projectIndex) in state.list">
                      <div class="center">
                        <div class="pj-item flex1">
                          <div class="project-status" v-if="projectItem.projectStatus === '进行中'">{{ projectItem.projectStatus }}</div>
                          <div class="xmwc-btn" v-if="projectItem.projectStatus === '完成'">{{
                                                        projectItem.projectStatus
                          }}</div>
                          <div class="xmwqd-btn" v-if="projectItem.projectStatus === '未启动'">{{ projectItem.projectStatus }}</div>
                          <div class="xmyq-btn" v-if="projectItem.projectStatus === '延期'">{{
                                                        projectItem.projectStatus
                          }}</div>
                          <a-tooltip>
                            <template #title>{{ projectItem.projectName }}</template>
                            <div class="project-name">{{ projectItem.projectName }}</div>
                          </a-tooltip>
                        </div>
                        <div class="pj-item flex1">项目开始时间：{{ projectItem.startTime }}</div>

                        <div class="pj-item flex1">计划终验时间：{{ projectItem.endTime }}</div>
                        <div class="flex1 pj-item"
                          ><span style="width: 60%">项目完成进度：</span><a-progress :percent="projectItem.finishProgress" stroke-linecap="square" strokeColor="#3875ff" status="active"
                        /></div>
                        <div class="flex1 pj-item"
                          ><span style="width: 60%">项目成本进度：</span><a-progress :percent="projectItem.costProgress" stroke-linecap="square" strokeColor="#B248F7" status="active"
                        /></div>
                        <a class="underline" href="javaSscript:;" @click="getActionList(projectItem.projectId)">与项目关联的行动项任务({{ projectItem.actionTaskCount }})</a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 这是日期 -->
                <div class="date-warpper flex-1">
                  <!-- 日期头部 -->
                  <div class="date-header flex">
                    <div :style="state.currentDayStyle" class="current-day"> 今天 <div class="borderTip"></div></div>
                    <div v-for="(days, month) in state.monthsWithDays" :key="month">
                      <div class="month" v-if="month <= 12"> {{ state.currentYear }}年{{ month }}月 </div>
                      <div class="month" v-else> {{ state.nextYear }}年{{ month - 12 }}月 </div>
                      <div class="flex">
                        <div v-for="day in days" :key="day" class="day-item">
                          {{ day }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="main" id="productInfoRight">
                    <!-- 这里是进度 -->
                    <!--                                    <div-->
                    <!--                                        class="content-wrapper"-->
                    <!--                                        v-for="(projectItem, projectIndex) in state.list"-->
                    <!--                                        :key="projectIndex"-->
                    <!--                                    >-->
                    <!--                                        &lt;!&ndash; 准备中 &ndash;&gt;-->
                    <!--                                        <div-->
                    <!--                                            class="ready-wrapper"-->
                    <!--                                            :style="calculateStyle(projectItem, projectIndex, 0)"-->
                    <!--                                        >-->
                    <!--                                            <div-->
                    <!--                                                class="ready"-->
                    <!--                                                :style="calculateWidth(projectItem, 0)"-->
                    <!--                                                @click="getDetail(projectItem, 0)"-->
                    <!--                                            >-->
                    <!--                                                <div class="change" :style="dailyProgressData(projectItem, 0)"></div-->
                    <!--                                            ></div>-->
                    <!--                                            <div-->
                    <!--                                                class="finish"-->
                    <!--                                                :style="-->
                    <!--                                                    calculateProgress(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        0,-->
                    <!--                                                        projectItem.children[0].finishProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{ projectItem.children[0].finishProgress }}%-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="cost"-->
                    <!--                                                :style="-->
                    <!--                                                    costProgressData(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        0,-->
                    <!--                                                        projectItem.children[0].costProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{-->
                    <!--                                                    projectItem.children[0].costProgress-->
                    <!--                                                        ? projectItem.children[0].costProgress-->
                    <!--                                                        : 0-->
                    <!--                                                }}%-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->

                    <!--                                        &lt;!&ndash; 开始 &ndash;&gt;-->
                    <!--                                        <div-->
                    <!--                                            class="start-wrapper"-->
                    <!--                                            :style="calculateStyle(projectItem, projectIndex, 1)"-->
                    <!--                                        >-->
                    <!--                                            <div-->
                    <!--                                                class="start"-->
                    <!--                                                :style="calculateWidth(projectItem, 1)"-->
                    <!--                                                @click="getDetail(projectItem, 1)"-->
                    <!--                                            >-->
                    <!--                                                <div class="change" :style="dailyProgressData(projectItem, 1)"></div>-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="finish"-->
                    <!--                                                :style="-->
                    <!--                                                    calculateProgress(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        1,-->
                    <!--                                                        projectItem.children[1].finishProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{ projectItem.children[1].finishProgress }}%-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="cost"-->
                    <!--                                                :style="-->
                    <!--                                                    costProgressData(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        1,-->
                    <!--                                                        projectItem.children[1].costProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{-->
                    <!--                                                    projectItem.children[1].costProgress-->
                    <!--                                                        ? projectItem.children[1].costProgress-->
                    <!--                                                        : 0-->
                    <!--                                                }}%-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                        &lt;!&ndash; 数据预处理 &ndash;&gt;-->
                    <!--                                        <div-->
                    <!--                                            class="preprocessing-wrapper"-->
                    <!--                                            :style="calculateStyle(projectItem, projectIndex, 2)"-->
                    <!--                                        >-->
                    <!--                                            <div-->
                    <!--                                                class="preprocessing"-->
                    <!--                                                :style="calculateWidth(projectItem, 2)"-->
                    <!--                                                @click="getDetail(projectItem, 2)"-->
                    <!--                                            >-->
                    <!--                                                <div class="change" :style="dailyProgressData(projectItem, 2)"></div>-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="finish"-->
                    <!--                                                :style="-->
                    <!--                                                    calculateProgress(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        2,-->
                    <!--                                                        projectItem.children[2].finishProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{ projectItem.children[2].finishProgress }}%-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="cost"-->
                    <!--                                                :style="-->
                    <!--                                                    costProgressData(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        2,-->
                    <!--                                                        projectItem.children[2].costProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{-->
                    <!--                                                    projectItem.children[2].costProgress-->
                    <!--                                                        ? projectItem.children[2].costProgress-->
                    <!--                                                        : 0-->
                    <!--                                                }}%-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                        &lt;!&ndash; 产品确认 &ndash;&gt;-->
                    <!--                                        <div-->
                    <!--                                            class="confirm-wrapper"-->
                    <!--                                            :style="calculateStyle(projectItem, projectIndex, 3)"-->
                    <!--                                            @click="getDetail(projectItem, 3)"-->
                    <!--                                        >-->
                    <!--                                            <div class="confirm" :style="calculateWidth(projectItem, 3)">-->
                    <!--                                                <div class="change" :style="dailyProgressData(projectItem, 3)"></div>-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="finish"-->
                    <!--                                                :style="-->
                    <!--                                                    calculateProgress(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        3,-->
                    <!--                                                        projectItem.children[3].finishProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{ projectItem.children[3].finishProgress }}%-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="cost"-->
                    <!--                                                :style="-->
                    <!--                                                    costProgressData(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        3,-->
                    <!--                                                        projectItem.children[3].costProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{-->
                    <!--                                                    projectItem.children[3].costProgress-->
                    <!--                                                        ? projectItem.children[3].costProgress-->
                    <!--                                                        : 0-->
                    <!--                                                }}%-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                        &lt;!&ndash; 数据建模 &ndash;&gt;-->
                    <!--                                        <div-->
                    <!--                                            class="modeling-wrapper"-->
                    <!--                                            :style="calculateStyle(projectItem, projectIndex, 4)"-->
                    <!--                                            @click="getDetail(projectItem, 4)"-->
                    <!--                                        >-->
                    <!--                                            <div class="modeling" :style="calculateWidth(projectItem, 4)">-->
                    <!--                                                <div class="change" :style="dailyProgressData(projectItem, 4)"></div>-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="finish"-->
                    <!--                                                :style="-->
                    <!--                                                    calculateProgress(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        4,-->
                    <!--                                                        projectItem.children[4].finishProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{ projectItem.children[4].finishProgress }}%-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="cost"-->
                    <!--                                                :style="-->
                    <!--                                                    costProgressData(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        4,-->
                    <!--                                                        projectItem.children[4].costProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{-->
                    <!--                                                    projectItem.children[4].costProgress-->
                    <!--                                                        ? projectItem.children[4].costProgress-->
                    <!--                                                        : 0-->
                    <!--                                                }}%-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                        &lt;!&ndash; 试运行 &ndash;&gt;-->
                    <!--                                        <div-->
                    <!--                                            class="test-run-wrapper"-->
                    <!--                                            :style="calculateStyle(projectItem, projectIndex, 5)"-->
                    <!--                                            @click="getDetail(projectItem, 5)"-->
                    <!--                                        >-->
                    <!--                                            <div class="test-run" :style="calculateWidth(projectItem, 5)">-->
                    <!--                                                <div class="change" :style="dailyProgressData(projectItem, 5)"></div>-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="finish"-->
                    <!--                                                :style="-->
                    <!--                                                    calculateProgress(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        5,-->
                    <!--                                                        projectItem.children[5].finishProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{ projectItem.children[5].finishProgress }}%-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="cost"-->
                    <!--                                                :style="-->
                    <!--                                                    costProgressData(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        5,-->
                    <!--                                                        projectItem.children[5].costProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{-->
                    <!--                                                    projectItem.children[5].costProgress-->
                    <!--                                                        ? projectItem.children[5].costProgress-->
                    <!--                                                        : 0-->
                    <!--                                                }}%-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                        &lt;!&ndash;                  正试运行&ndash;&gt;-->
                    <!--                                        <div-->
                    <!--                                            class="run-wrapper"-->
                    <!--                                            :style="calculateStyle(projectItem, projectIndex, 6)"-->
                    <!--                                            @click="getDetail(projectItem, 6)"-->
                    <!--                                        >-->
                    <!--                                            <div class="run" :style="calculateWidth(projectItem, 6)">-->
                    <!--                                                <div class="change" :style="dailyProgressData(projectItem, 6)"></div>-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="finish"-->
                    <!--                                                :style="-->
                    <!--                                                    calculateProgress(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        6,-->
                    <!--                                                        projectItem.children[6].finishProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{ projectItem.children[6].finishProgress }}%-->
                    <!--                                            </div>-->
                    <!--                                            <div-->
                    <!--                                                class="cost"-->
                    <!--                                                :style="-->
                    <!--                                                    costProgressData(-->
                    <!--                                                        projectItem,-->
                    <!--                                                        6,-->
                    <!--                                                        projectItem.children[6].costProgress-->
                    <!--                                                    )-->
                    <!--                                                "-->
                    <!--                                            >-->
                    <!--                                                {{-->
                    <!--                                                    projectItem.children[6].costProgress-->
                    <!--                                                        ? projectItem.children[6].costProgress-->
                    <!--                                                        : 0-->
                    <!--                                                }}%-->
                    <!--                                            </div>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->

                    <div class="content-wrapper" v-for="(projectItem, projectIndex) in state.list" :key="projectIndex">
                      <div v-for="phaseIndex in [0, 1, 2, 3, 4, 5, 6]" :key="phaseIndex" :class="getClassWrapper(phaseIndex)">
                        <div
                          v-if="isValidPhase(projectItem, phaseIndex)"
                          :class="getClass(phaseIndex)"
                          :style="calculateStyle(projectItem, projectIndex, phaseIndex)"
                          @click="getDetail(projectItem, phaseIndex)"
                        >
                          <div :class="getPhaseClass(phaseIndex)" :style="calculateWidth(projectItem, phaseIndex)">
                            <div class="change" :style="dailyProgressData(projectItem, phaseIndex)"></div>
                          </div>
                          <div
                            class="finish"
                            :style="
                                                            calculateProgress(
                                                                projectItem,
                                                                phaseIndex,
                                                                projectItem.children[phaseIndex].finishProgress
                                                            )
                                                        "
                          >
                            {{ projectItem.children[phaseIndex].finishProgress }}%
                          </div>
                          <div
                            class="cost"
                            :style="
                                                            costProgressData(
                                                                projectItem,
                                                                phaseIndex,
                                                                projectItem.children[phaseIndex].costProgress
                                                            )
                                                        "
                          >
                            {{
                                                            projectItem.children[phaseIndex].costProgress
                                                                ? projectItem.children[phaseIndex].costProgress
                                                                : 0

                            }}%
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-spin>
          <!--                 图表部分-->
        </div>
      </div>
      <!-- end vid_cc874syqn2 自定义模板_0tdzkmsbqd -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  import { nextTick } from 'vue'
      onMounted(() => {
          state.dateList = getDays()
          const day = dayjs().diff(dayjs(state.dateList[0].date), 'day')
          state.currentDayStyle = {
              left: `${30 * day - 5}px`
          }
          nextTick(() => {
              const middle = document.querySelector('.date-warpper').clientWidth / 2
              document.querySelector('.date-warpper').scrollLeft = 30 * day - middle
              const mainLeft = document.querySelector('.main')
              const productInfoRight = document.querySelector('.product-info')
              mainLeft.addEventListener('scroll', syncScroll)
              productInfoRight.addEventListener('scroll', syncScroll)
          })
          initializeMonthsWithDays()
        getTableData()
      })
      function resetWidth() {
          const day = dayjs().diff(dayjs(state.dateList[0].date), 'day')
          const middle = document.querySelector('.date-warpper').clientWidth / 2
          document.querySelector('.date-warpper').scrollLeft = 30 * day - middle
      }

      const standardStyle = {
          maxWidth: 'unset'
      }
      // function getDays() {
      //     const currentYear = new Date().getFullYear() // 获取当前年份
      //     return Array.from({ length: 6 }, (v, i) => {
      //         const date = new Date(currentYear, i + 1, 0) // 设置日期为下月的第0天，即当前月的最后一天
      //         return {
      //             date: `${currentYear}-${(i + 1).toString().padStart(2, '0')}`, // 格式化月份为 "yyyy-mm"
      //             days: date.getDate() // 获取当月的天数
      //         }
      //     })
      // }
      function getDays() {
          const currentYear = new Date().getFullYear() // 获取当前年份
          const nextYear = currentYear + 1 // 下一年
          const monthsToGet = 12 * 2 // 当前年和下一年共24个月

          return Array.from({ length: monthsToGet }, (v, i) => {
              const year = i < 12 ? currentYear : nextYear // 前12个月为当前年，后12个月为下一年
              const month = (i % 12) + 1 // 月份在1到12之间
              const date = new Date(year, month, 0) // 设置日期为下月的第0天，即当前月的最后一天
              return {
                  date: `${year}-${month.toString().padStart(2, '0')}`, // 格式化月份为 "yyyy-mm"
                  days: date.getDate() // 获取当月的天数
              }
          })
      }
      const initializeMonthsWithDays = () => {
          for (let month = 1; month <= 24; month++) {
              state.monthsWithDays[month] = getDaysInMonth(month, state.currentYear)
          }
      }
      const getDaysInMonth = (month, year) => {
          return Array.from({ length: new Date(year, month, 0).getDate() }, (_, i) => i + 1)
      }
      const state = reactive({
          projectName: undefined,
          projectStatus: '',
          projectNameList: [],
          detailVisible: false,
          detailActiveKey: '1',
          doingTask: [],
          doingActionTask: [],
          riskTask: [],
          riskActionTask: [],
          actionTaskVisible: false,
          actionProjectData: [],
          chartData: [],
          currentYear: new Date().getFullYear(),
          nextYear: new Date().getFullYear() + 1,
          monthsWithDays: {},
          list: [],
          dateList: [],
          currentDayStyle: {},
          milepostMsg: {},
          projectlist: []
      })
      const doingTaskColumns = [
          {
              title: '任务名称',
              dataIndex: 'taskName',
              ellipsis: true,
              resizable: false,
              width: '200px',
              fixed: 'left',
              align: 'left'
          },
          {
              title: '任务状态',
              dataIndex: 'taskStatus',
              resizable: false,
              ellipsis: false,
              width: '140px',
              align: 'center'
          },
          {
              title: '任务负责人',
              dataIndex: 'taskOwner',
              resizable: false,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '审核员',
              dataIndex: 'assessorName',
              resizable: false,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },

          {
              title: '任务执行人',
              resizable: false,
              dataIndex: 'taskParticipantStr',
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '计划开始',
              dataIndex: 'startTime',
              resizable: false,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '实际开始',
              dataIndex: 'actualStarTime',
              resizable: false,
              ellipsis: true,
              width: '120px',
              align: 'center'
          },
          {
              title: '计划完成',
              dataIndex: 'endTime',
              ellipsis: true,
              width: '120px',
              resizable: false,
              align: 'center'
          }
      ]
      const riskColumns = [
          {
              title: '任务名称',
              dataIndex: 'taskName',
              ellipsis: true,
              resizable: false,
              width: '220px',
              fixed: 'left',
              align: 'left'
          },
          {
              title: '风险描述',
              dataIndex: 'riskDescription',
              resizable: false,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '解决方案',
              dataIndex: 'solution',
              resizable: false,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          { title: '提交人', dataIndex: 'createdBy', align: 'center' },
          { title: '提交时间', dataIndex: 'createdTime', align: 'center' }
      ]
      const riskActionColumns = [
          {
              title: '行动项任务名称',
              dataIndex: 'actionTaskName',
              ellipsis: true,
              resizable: false,
              width: '220px',
              fixed: 'left',
              align: 'left'
          },
          {
              title: '风险描述',
              dataIndex: 'riskDescription',
              resizable: false,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          {
              title: '解决方案',
              dataIndex: 'solution',
              resizable: false,
              ellipsis: true,
              width: '140px',
              align: 'center'
          },
          { title: '提交人', dataIndex: 'createdBy', align: 'center' },
          { title: '提交时间', dataIndex: 'createdTime', align: 'center' }
      ]
      const doingActionTaskColumns = [
          {
              title: '行动项任务名称',
              dataIndex: 'actionTaskName',
              ellipsis: true,
              width: '180px',
              fixed: 'left',
              align: 'left'
          },
          {
              title: '任务状态',
              dataIndex: 'taskStatus',
              resizable: false,
              ellipsis: false,
              width: '120px',
              align: 'center'
          },
          {
              title: '任务负责人',
              dataIndex: 'taskOwner',
              resizable: false,
              ellipsis: true,
              width: '120px',
              align: 'center'
          },
          {
              title: '审核员',
              dataIndex: 'assessorName',
              resizable: false,
              ellipsis: true,
              width: '120px',
              align: 'center'
          },
          {
              title: 'PMO',
              dataIndex: 'projectManagementOffice',
              resizable: false,
              ellipsis: true,
              width: '120px',
              align: 'center'
          },
          {
              title: '任务执行人',
              resizable: false,
              dataIndex: 'taskParticipantStr',
              ellipsis: true,
              width: '120px',
              align: 'center'
          },
          {
              title: '计划开始',
              dataIndex: 'startTime',
              resizable: false,
              ellipsis: true,
              width: '120px',
              align: 'center'
          },
          {
              title: '实际开始',
              dataIndex: 'examPassTime',
              resizable: false,
              ellipsis: true,
              width: '120px',
              align: 'center'
          },
          {
              title: '计划完成',
              dataIndex: 'endTime',
              ellipsis: true,
              width: '120px',
              resizable: false,
              align: 'center'
          }
      ]
      const spinLoading = ref(true)
      function getTableData() {
          spinLoading.value = true
          post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/search', {
              projectId: state.projectName,
              status: state.projectStatus
          })
              .then(data => {
                  state.list = data.data
              })
              .finally(() => {
                spinLoading.value = false
              })

      }

      function resetTableData() {
          ;(state.projectName = undefined), (state.projectStatus = '')
          getTableData()
      }
      function getFirstDayOfYear() {
          const currentYear = dayjs().year()
          return `${currentYear}-01-01`
      }
      // function calculateStyle(projectItem, projectIndex, phaseIndex) {
      //     console.log(phaseIndex, 'phaseIndex');
      //     const startDate = getFirstDayOfYear();
      //     const phaseStartDate = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
      //     const daysDifference = phaseStartDate.diff(startDate, 'day');
      //     const left = daysDifference * 30;
      //     if (phaseIndex === 0) {
      //         return {
      //             position: 'absolute',
      //             left: `${left}px`,
      //             top: '10px'
      //         };
      //     } else {
      //         return {
      //             position: 'absolute',
      //             left: `${left}px`,
      //             top: `${phaseIndex * 42 + 10}px`
      //         };
      //     }
      // }
      //
      // function calculateWidth(projectItem, phaseIndex) {
      //     const startDate = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
      //     const endDate = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
      //     const daysDifference = endDate.diff(startDate, 'day');
      //     const width = Number(daysDifference + 1) * 30;
      //     return {
      //         width: `${width}px`
      //     };
      // }
      //
      // function calculateProgress(projectItem, phaseIndex, progressNum) {
      //     const startDate = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
      //     const endDate = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
      //     const daysDifference = endDate.diff(startDate, 'day');
      //     const progress = (progressNum / 100) * Number(daysDifference + 1) * 30;
      //     return {
      //         width: `${progress}px`
      //     };
      // }
      //
      // function costProgressData(projectItem, phaseIndex, costProgress = 0) {
      //     const startDate = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
      //     const endDate = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
      //     const daysDifference = endDate.diff(startDate, 'day');
      //     const progress = (costProgress / 100) * Number(daysDifference + 1) * 30;
      //     return {
      //         width: `${progress}px`
      //     };
      // }
      //
      // function dailyProgressData(projectItem, phaseIndex) {
      //     const startDate = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
      //     const endDate = dayjs(projectItem?.children?.[phaseIndex]?.alterEndTime ?? new Date());
      //     if (endDate.isValid()) {
      //         const s1 = dayjs(projectItem?.children?.[phaseIndex]?.startTime ?? new Date());
      //         const e1 = dayjs(projectItem?.children?.[phaseIndex]?.endTime ?? new Date());
      //         const dfSt = e1.diff(s1, 'day');
      //         let dfStW = dfSt * 30;
      //         const daysDifference = endDate.diff(startDate, 'day');
      //         const progress = Number(daysDifference + 1) * 30;
      //         return {
      //             width: `${progress - 30}px`,
      //             left: `${dfStW + 30}px`
      //         };
      //     }
      //     return {
      //         width: '0px',
      //         left: '0px'
      //     };
      // }
      const getClassWrapper = phaseIndex => {
          const classes = [
              'ready-wrapper',
              'start-wrapper',
              'preprocessing-wrapper',
              'confirm-wrapper',
              'modeling-wrapper',
              'test-run-wrapper',
              'run-wrapper'
          ]
          return classes[phaseIndex]
      }

      const getClass = phaseIndex => {
          const classes = ['ready', 'start', 'preprocessing', 'confirm', 'modeling', 'test-run', 'run']
          return classes[phaseIndex]
      }

      const getPhaseClass = phaseIndex => {
          const classes = ['ready', 'start', 'preprocessing', 'confirm', 'modeling', 'test-run', 'run']
          return classes[phaseIndex]
      }
      const isValidPhase = (projectItem, phaseIndex) => {
          if (!projectItem.children || !projectItem.children[phaseIndex]) return false
          const { startTime, endTime, finishProgress, costProgress } = projectItem.children[phaseIndex]
          if (!dayjs(startTime).isValid() || !dayjs(endTime).isValid()) return false
          if (finishProgress === undefined || costProgress === undefined) return false
          return true
      }

      const calculateStyle = (projectItem, projectIndex, phaseIndex) => {
          if (!isValidPhase(projectItem, phaseIndex)) return {}
          const startDate = getFirstDayOfYear()
          const phaseStartDate = dayjs(projectItem.children[phaseIndex].startTime)
          const daysDifference = phaseStartDate.diff(startDate, 'day')
          const left = daysDifference * 30
          return {
              position: 'absolute',
              left: `${left}px`,
              top: phaseIndex === 0 ? '10px' : `${phaseIndex * 42 + 10}px`
          }
      }

      const calculateWidth = (projectItem, phaseIndex) => {
          if (!isValidPhase(projectItem, phaseIndex)) return { width: '0px' }
          const startDate = dayjs(projectItem.children[phaseIndex].startTime)
          const endDate = dayjs(projectItem.children[phaseIndex].endTime)
          const daysDifference = endDate.diff(startDate, 'day')
          return { width: `${(daysDifference + 1) * 30}px` }
      }

      const calculateProgress = (projectItem, phaseIndex, progressNum) => {
          if (!isValidPhase(projectItem, phaseIndex)) return { width: '0px' }
          const startDate = dayjs(projectItem.children[phaseIndex].startTime)
          const endDate = dayjs(projectItem.children[phaseIndex].endTime)
          const daysDifference = endDate.diff(startDate, 'day')
          return { width: `${(progressNum / 100) * (daysDifference + 1) * 30}px` }
      }

      const costProgressData = (projectItem, phaseIndex, costProgress = 0) => {
          if (!isValidPhase(projectItem, phaseIndex)) return { width: '0px' }
          const startDate = dayjs(projectItem.children[phaseIndex].startTime)
          const endDate = dayjs(projectItem.children[phaseIndex].endTime)
          const daysDifference = endDate.diff(startDate, 'day')
          return { width: `${(costProgress / 100) * (daysDifference + 1) * 30}px` }
      }

      const dailyProgressData = (projectItem, phaseIndex) => {
          if (!isValidPhase(projectItem, phaseIndex)) return { width: '0px', left: '0px' }
          const startDate = dayjs(projectItem.children[phaseIndex].endTime)
          const endDate = dayjs(projectItem.children[phaseIndex].alterEndTime)
          if (endDate.isValid()) {
              const initialStartDate = dayjs(projectItem.children[phaseIndex].startTime)
              const initialEndDate = dayjs(projectItem.children[phaseIndex].endTime)
              const initialDaysDifference = initialEndDate.diff(initialStartDate, 'day')
              const initialWidth = initialDaysDifference * 30
              const daysDifference = endDate.diff(startDate, 'day')
              return {
                  width: `${(daysDifference + 1) * 30 - 30}px`,
                  left: `${initialWidth + 30}px`
              }
          }
          return { width: '0px', left: '0px' }
      }
      function getActionList(id) {
          post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${id}`, {}).then(data => {
              if (data.code === 200) {
                  state.actionProjectData = data.data.dataList
                  state.actionTaskVisible = true
              } else {
                  message.error(data.message)
              }
          })
      }
      function getDetail(item, index) {
          const milepostId = item.children[index].milepostId
          const projectId = item.projectId
          post('/solution-ppm/api/v2/built-in-system-ppm/project/stage/search', {
              milepostName: item.children[index].milepostName,
              projectId: projectId
          }).then(data => {
              if (data.data) {
                  state.milepostMsg = data?.data[0] || {}
                  state.milepostMsg.pmName = item.pmName
                  state.milepostMsg.projectName = item.projectName
              }
              state.detailVisible = true
          })
          // 进行中任务
          post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/task/search', {
              milepostId: milepostId,
              projectId: projectId
          }).then(data => {
              state.doingTask = data.data
          })
          //   进行中行动项任务
          post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${projectId}`, {
              milepostId: milepostId,
              isRunning: '是'
          }).then(data => {
              state.doingActionTask = data.data.dataList
          })
          // 未关闭任务风险
          post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/task/queryRisk', {
              projectId: projectId,
              milepostId: milepostId
          }).then(data => {
              state.riskTask = data.data
          })
          // 行动项风险
          post(
              `/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/action_task/warn_list/${projectId}/${milepostId}`,
              {}
          ).then(data => {
              state.riskActionTask = data.data
          })
      }

      // Function to sync scroll
      function syncScroll(event) {
          const percentageScrolled = event.target.scrollTop / (event.target.scrollHeight - event.target.clientHeight)

          productInfoRight.scrollTop =
              percentageScrolled * (productInfoRight.scrollHeight - productInfoRight.clientHeight)
          mainLeft.scrollTop = percentageScrolled * (mainLeft.scrollHeight - mainLeft.clientHeight)
      }

      // Add scroll event listeners to both divs
      function getProject() {
          get('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/factory_project/search').then(data => {
              state.projectlist = data.data
          })
      }
      function detailClose() {
          state.detailVisible = false
          state.detailActiveKey = '1'
      }

      const statuState = reactive({
          visible: false,
          list: []
      })
      function getTaskStatus(id, type) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/refactoring_task/task_approval_detail/${id}/${type}    `).then(
              data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  statuState.visible = true
                  statuState.list = data.data
              }
          )
      }

      const getIconStatus = status => {
          if (status === 'finish') {
              return 'finish'
          } else if (status === 'process') {
              return 'process'
          } else {
              return 'error'
          }
      }
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  .body {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
      }
      .row-size {
          height: 32px;
          margin-bottom: 12px;
      }
      .top {
          background-color: #fff;
          height: 64px;
          border-radius: 2px;
          padding: 19px 24px;
          margin-bottom: 16px;
      }
      .content {
          background-color: #fff;
          padding: 16px 24px;
      }
      .table-tip {
          display: flex;
          height: 53px;
          justify-content: space-between;
      }
      .tip-title {
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
          line-height: 53px;
      }
      .tip1,
      .tip2,
      .tip3,
      .tip4,
      .tip5,
      .tip6,
      .tip7,
      .tip8 {
          height: 20px;
          margin: 16px 0 16px 24px;
          display: flex;
      }
      .box1,
      .box2,
      .box3,
      .box4,
      .box5,
      .box6,
      .box7,
      .box8 {
          background: #ffe58f;
          width: 32px;
          height: 8px;
          margin-top: 7px;
          margin-left: 4px;
      }
      .box2 {
          background: #c7f870;
      }
      .box3 {
          background: #77f2a3;
      }
      .box4 {
          background: #87e9de;
      }
      .box5 {
          background: #90cbff;
      }
      .box6 {
          background: #d3adf7;
      }
      .box7 {
          background: #ffadd3;
      }
      .box8 {
          background: #ff2a00;
      }
      .tip-msg {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 400;
      }
      .detail-item {
          font-size: 14px;
          color: #000000;
          line-height: 22px;
          font-weight: 500;
      }
      .default-table {
          margin-top: 12px;
          margin-bottom: 12px;
      }

      .default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #3875ff;
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 600;
          color: #fff;
          border-bottom: 1px solid #d9d9d9;
          padding: 8px 16px;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr:not(:last-child)
          > th {
          border-bottom: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th {
          border-right: 1px solid #d9d9d9;
      }

      /* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
      .default-table :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
          border-left: none;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th[colstart='0']:first-child {
          border-left: 1px solid #d9d9d9;
      }

      /* 开启粘性表头后，表格结构会发生变化 需另外处理 */
      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-header
          table {
          border-top: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          > .@{ant-prefix}-table-content
          > table {
          border-top: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table-thead)
          > tr
          > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(
              .@{ant-prefix}-table-row-expand-icon-cell
          ):not([colspan])::before {
          background: #d9d9d9;
          width: 1px;
      }

      /*表格*/
      .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #595959;
          border-bottom: 1px solid #d9d9d9;
          padding: 8px 16px;
          word-break: break-all;

          .cell-wrapper {
              padding: 0 16px;
          }
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-tbody
          tr
          > td {
          border-right: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-tbody
          tr
          > td:first-child {
          border-left: 1px solid #d9d9d9;
      }
      .wqd-btn,
      .yq-btn,
      .wc-btn,
      .yqwc-btn,
      .jxz-btn,
      .spz-btn {
          background: #ffffff;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          letter-spacing: 0;
          text-align: center;
          line-height: 40px;
          font-weight: 400;
          width: 66px;
          height: 22px;
          line-height: 22px;
          margin: 0 auto;
      }
      .wc-btn {
          border: 1px solid rgba(48, 191, 120, 1);
          color: #30bf78;
      }

      .yq-btn {
          border: 1px solid rgba(224, 32, 32, 1);
          color: #e02020;
      }

      .wqd-btn {
          border: 1px solid rgba(140, 140, 140, 1);
          color: #8c8c8c;
      }

      .jxz-btn {
          border: 1px solid rgba(56, 117, 255, 1);
          color: #3875ff;
      }

      .yqwc-btn {
          border: 1px solid rgba(255, 152, 70, 1);
          color: #ff9846;
      }

      .spz-btn {
          border: 1px solid #00b4ec;
          color: #00b4ec;
      }
      .flex {
          display: flex;
          position: relative;
      }
      .flex-1 {
          flex: 1;
          overflow: auto;
      }

      .day-item {
          width: 30px;
          height: 30px;
          width: 30px;
          height: 30px;
          border: 1px solid #eaeaea;
          line-height: 30px;
          text-align: center;
      }
      .content-wrapper {
          width: 21900px;
          padding: 4px;
          position: relative;
          height: 310px;
          border-bottom: 1px solid #bfbfbf;
      }

      .finish,
      .cost {
          line-height: 12px;
          color: #fff;
          font-size: 10px;
          padding-left: 5px;
      }
      .finish {
          height: 12px;
          background-color: #3875ff;
      }
      .cost {
          height: 12px;
          background-color: #b248f7;
      }
      .ready {
          height: 12px;
          background-color: #ffe58f;
          position: relative;
      }
      .start {
          height: 12px;
          background-color: #c7f870;
          position: relative;
      }
      .preprocessing {
          height: 12px;
          background-color: #77f2a3;
          position: relative;
      }
      .confirm {
          height: 12px;
          background-color: #87e9de;
          position: relative;
      }
      .modeling {
          height: 12px;
          background-color: #90cbff;
          position: relative;
      }
      .test-run {
          height: 12px;
          background-color: #d3adf7;
          position: relative;
      }
      .run {
          height: 12px;
          background-color: #ffadd3;
          position: relative;
      }
      .month {
          text-align: center;
          background: rgba(56, 117, 255, 0.2);
          height: 30px;
          line-height: 30px;
          border-right: #bfbfbf 1px solid;
      }
      .table-title {
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 500;
          text-align: center;
          height: 60px;
          line-height: 60px;
          background: rgba(56, 117, 255, 0.2);
      }
      .product-list {
          box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.3); /* Right shadow */
          border-left: 1px solid #d9d9d9;
      }
      .current-day {
          background-color: #4874f6;
          color: #fff;
          position: absolute;
          width: 36px;
          height: 21px;
          line-height: 21px;
          textalign: center;
          background: #3875ff;
          letterspacing: 0;
          borderradius: 2px;
          fontsize: 14px;
          text-align: center;
      }
      .today {
          border-right: 1px solid #4874f6;
      }
      .project-item {
          height: 310px;
          padding: 16px;
          background-color: #fff;
          border-bottom: 1px solid #d9d9d9;
          display: flex;
          align-items: start;
      }

      .project-name {
          display: inlie-block;
          min-width: 70px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          margin-left: 12px;
          line-height: 24px;
      }
      .mgb {
          margin: 10px 0;
      }
      .underline {
          color: #3875ff;
          text-decoration: underline;
      }
      .flex1 {
          display: flex;
          justify-content: start;
      }
      .pj-item {
          margin: 10px 0;
      }
      .pj-item:first-child {
          margin: 0;
      }
      .center {
          width: 100%;
      }
      .change {
          background-color: #ff2a00;
          height: 12px;
          position: absolute;
          right: 0;
      }
      .too-long {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: inline-block;
          width: 210px;
          margin-top: 5px;
      }
      .main {
          height: 560px;
          min-width: 21900px;
          overflow-y: auto;
          overflow-x: hidden;
      }
      .product-info {
          width: 300px;
          height: 560px;
          overflow-y: auto;
          overflow-x: hidden;
      }
      .product-info::-webkit-scrollbar {
          width: 0; /* 隐藏垂直滚动条 */
      }
      .borderTip {
          border-right: 1px dashed #4874f6;
          height: 650px;
          position: relative;
          z-index: 999;
      }
      .task-name-title {
          display: inlie-block;
          min-width: 50px;
      }
      .task-milestone {
          position: absolute;
          top: 13px;
          left: 9px;
          width: 45px;
          height: 14px;
          font-size: 12px;
          line-height: 14px; /* 与高度相同 */
          color: #3875ff;
          background: #ebf1ff;
          text-align: center;
      }
      .task-milestone-right {
          left: 70px;
      }
      .task-first {
          position: absolute;
          top: 13px;
          left: 16px;
          width: 32px;
          height: 14px;
          background-image: url('@/assets/images/323d370d1ad33c170193f9f229fc11b1.png');
          background-size: cover;
      }
      .task-first-right {
          position: absolute;
          top: 13px;
          left: 70px;
          width: 32px;
          height: 14px;
          background-image: url('@/assets/images/323d370d1ad33c170193f9f229fc11b1.png');
          background-size: cover;
      }
      .task-over {
          position: absolute;
          top: 13px;
          left: 16px;
          width: 32px;
          height: 14px;
          background-image: url('@/assets/images/fa6561569af1852779db3c70ce2cd4b6.png');
          background-size: cover;
      }
      .task-over-right {
          position: absolute;
          top: 13px;
          left: 70px;
          width: 32px;
          height: 14px;
          background-image: url('@/assets/images/fa6561569af1852779db3c70ce2cd4b6.png');
          background-size: cover;
      }
      /*关键路径*/
      .critical-path {
          position: absolute;
          top: 13px;
          left: 5px;
          font-size: 12px;
          width: 60px;
          height: 14px;
          line-height: 14px; /* 与高度相同 */
          color: #ff9846;
          background: #fff5ed;
          text-align: center;
      }
      .is-first {
          margin-left: 55px;
      }

      .is-first-no {
          margin-left: 16px;
      }
      .is-first-path {
          margin-left: 115px;
      }
      .is-first-path-no-mark {
          margin-left: 70px;
      }
      .task-name-title {
          display: inlie-block;
          min-width: 50px;
      }
      .xmyq-btn,
      .xmwc-btn {
          background: rgba(24, 194, 255, 0.1);
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          letter-spacing: 0;
          text-align: center;
          font-weight: 700;
          width: 60px;
          height: 24px;
          line-height: 24px;
          margin: 0 auto;
          display: inline-block;
      }

      .xmwqd-btn,
      .xmjxz-btn {
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          letter-spacing: 0;
          text-align: center;
          font-weight: 700;
          width: 60px;
          height: 24px;
          line-height: 24px;
          margin: 0 auto;
          display: inline-block;
      }

      .xmjxz-btn {
          border: 1px solid rgba(24, 194, 255, 1);
          color: #18c2ff !important;
          background: rgba(24, 194, 255, 0.1);
      }

      .xmwc-btn {
          border: 1px solid rgba(82, 196, 26, 1);
          color: #52c41a !important;
          background: #edf9e8;
      }

      .xmyq-btn {
          border: 1px solid rgba(245, 34, 45, 0.5);
          color: #f5222d !important;
          background: rgba(245, 34, 45, 0.1);
      }

      .xmwqd-btn {
          border: 1px solid rgba(140, 140, 140, 1);
          color: #8c8c8c !important;
      }
      .project-status {
          background: rgba(82, 196, 26, 0.2);
          border-radius: 2px;
          width: 60px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          font-size: 14px;
          color: #52c41a;
          letter-spacing: 0;
          font-weight: 700;
      }
      :deep(.ant3-progress-inner) {
          border-radius: 0;
      }
      .date-warpper {
          position: relative;
          overflow-y: hidden;
      }
      .scroll-bar {
          position: absolute;
          height: 100px;
          width: 7px;
          background-color: #b6b7b9;
          border-radius: 2px;
          right: 0;
          top: 60px;
      }

  /*样式*/

  .title-new-status {
    height: 62px;
    line-height: 36px;
    padding: 0 16px;
    margin-bottom: 16px;
    background-image: url('@/assets/images/18c5598e33c9488e1925bf0bd3b80ebb.png');
    background-size: cover;
    border: 1px solid #3875ff;
    border-radius: 5px;
  }

  :deep(.ant3-steps-item-container) {
    padding: 0 16px;
  }
  :deep(.ant3-steps-item-tail::after) {
    margin-left: 12px;
    background-color: #3875ff;
  }
  :deep(.ant3-steps-item-description) {
    font-size: 12px;
    color: #595959;
    text-align: left;
    line-height: 20px;
    font-weight: 400;
  }
  :deep(.ant3-steps-item-icon) {
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: #3875ff;
    margin-top: 6px;
  }
  :deep(.ant3-steps-item-title) {
    height: 28px;
    font-size: 14px;
    color: #262626;
    text-align: left;
    line-height: 22px;
    font-weight: 400;
  }
  :deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
    background-color: #3875ff;
  }
  :deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
    background: #3875ff;
  }
  :deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
    border-color: #3875ff;
  }
  :deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
    color: #3875ff !important;
  }
  .task-status-new{
    cursor: pointer;
  }
  .left-title,
  .right-title {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    letter-spacing: 0;
    text-align: left;
    font-weight: 400;
    height: 31px;
    line-height: 31px;
  }
  .weight-status {
    font-size: 14px;
    color: #262626;
    letter-spacing: 0;
    font-weight: 500;
  }
  .batch-line{
    width: 100%;
    border-top: 1px solid #d9d9d9;
    margin: 16px 0;
  }
  .weight-status-new{
    font-weight: 600;
    color:#262626;
  }
</style>